/*
      *  公式:  小图/大图=小区域/大区域
      *   只能修改小区域
      *   小区域=(小图/大图)*大区域
      *
      * scale=大区域/小区域
      * */
$(window).load(function () {
    let smallImg = $("#smallImg"); //小图
    let smallArea = $(".smallArea") //小区域
    let bigArea = $("#bigArea"); // 大区域
    let bigImg = $("#bigImg"); // 大图;
    let ul = $(".center_cent_c_t1_top")
    smallArea.css({
        height: (smallImg.height() / bigImg.height()) * bigArea.height(),
        width: (smallImg.width() / bigImg.width()) * bigArea.width()
    })
    smallImg.on("mouseenter", function () {
        smallArea.show();
        bigArea.show();
        ul.css({
            opacity: 0
        })

        $(document).on("mousemove", function (e) {
            let mX = e.pageX - smallImg.offset().left - smallArea.width() / 2;
            let mY = e.pageY - smallImg.offset().top - smallArea.height() / 2;
            if (mX <= 0) {
                mX = 0
            }
            if (mY <= 0) {
                mY = 0
            }
            if (mX >= smallImg.width() - smallArea.width()) {
                mX = smallImg.width() - smallArea.width()
            }
            if (mY >= smallImg.height() - smallArea.height()) {
                mY = smallImg.height() - smallArea.height()
            }
            let iScale = bigArea.height() / smallArea.height();
            bigImg.css({
                left: -mX * iScale,
                top: -mY * iScale
            })
            smallArea.css({
                left: mX,
                top: mY,
                height: 190,
                width: 190
            })

        })
    }).on("mouseleave", function () {
        smallArea.hide();
        bigArea.hide();
        ul.css({
            opacity: 1
        })
        $(document).off("mousemove")
    });
    $(".right-nav li").on("click",function () {
        $(this).addClass("cut").siblings("li").removeClass("cut");
        let index=$(this).index();
        $(".omg .main").eq(index).addClass("select").siblings().removeClass("select");
    })

})
